<template>
  <div class="list">
    <div class="search">
      <el-input
        v-model="queryParams.searchValue"
        clearable
        placeholder="关键字搜索"
        @clear="getList"
      >
        <template #append>
          <el-button @click="getList" :icon="Search" />
        </template>
      </el-input>
    </div>
    <div class="query">
      <div class="top">
        <div class="left">
          <div class="item-title">通用分类：</div>
          <div
            class="item"
            v-for="(i, k) in generalList"
            :key="k"
            :class="{ active: i.id == queryParams.cloudMarketGeneralClassification }"
            @click="handleGeneral(i.id)"
          >
            {{ i.name }}
          </div>
        </div>
      </div>
      <div class="top">
        <div class="left">
          <div class="item-title">行业分类：</div>
          <div
            class="item"
            v-for="(i, k) in industryList"
            :key="k"
            :class="{ active: i.id == queryParams.cloudMarketIndustryClassification }"
            @click="handleIndustry(i.id)"
          >
            {{ i.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="top">
      <div class="left">
        <div class="item-title">排序</div>
        <div
          class="item"
          v-for="(i, k) in sortList"
          :key="k"
          @click="handleSort(i.value)"
        >
          <span :class="{ active: i.value == queryParams.params.sortField }">{{ i.label }}</span>
          <el-icon :class="{ active: i.value == queryParams.params.sortField && queryParams.params.sort == 'desc' }"><SortDown /></el-icon>
          <el-icon :class="{ active: i.value == queryParams.params.sortField && queryParams.params.sort == 'asc' }" style="margin-left: -8px;"><SortUp /></el-icon>
        </div>
      </div>
      <div class="right">
        为您找到 <span style="color: #4098ff"> {{ total || 0 }} </span> 条结果
      </div>
    </div>
    <div class="info">
      <div
        class="listItem"
        v-for="(item, index) in dataList"
        :key="index"
        @click="handleView(item)"
      >
        <div class="item1">
          <el-image style="width: 80px; height: 80px" :src="baseURL + item.picture" />
        </div>
        <div class="item2">
          <div class="top1">{{ item.title || "" }}</div>
          <div class="top2">
            {{ item.intro || "" }}
          </div>
          <div class="top3">
            <div>服务商：{{ item.corporateName || "" }}</div>
            <div>发布时间：{{ item.createTime || "" }}</div>
          </div>
        </div>
        <div class="item3">
          ￥<span>{{ item.lowestPrice || "暂无" }}</span>
        </div>
      </div>
      <div class="page-footer">
        <el-pagination
          :total="total"
          v-model:current-page="queryParams.params.pageNum"
          v-model:page-size="queryParams.params.pageSize"
          layout="total, prev, pager, next"
          small
          @size-change="getList"
          @current-change="getList"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Search, SortDown, SortUp } from "@element-plus/icons-vue";
import { marketList, marketType } from "@/api/other";
const router = useRouter();

const baseURL = import.meta.env.VITE_BASE_URL;
const dataList = ref<any>([]); // 数据列表
const total = ref(0); // 数据总数
const generalList = ref<any>([]); // 通用分类
const industryList = ref<any>([]); // 行业分类
const sortList = ref<any>([
  { label: "默认", value: "price" },
  { label: "发布时间", value: "createTime" },
]);
const queryParams = ref<any>({
  // 查询参数
  searchValue: "", // 搜索关键字
  cloudMarketGeneralClassification: "", // 通用分类
  cloudMarketIndustryClassification: "", // 行业分类
  params: {
    sort: "desc",
    sortField: "price",
    pageNum: 1,
    pageSize: 10,
  },
});

onMounted(() => {
  getMarketList();
  getList();
});

// 获取数据列表
const getList = () => {
  marketList(queryParams.value).then((res: any) => {
    let list = res.rows;
    list.forEach((i) => {
      i.intro = i.intro ? i.intro.replace(/<[^>]*>/g, "") : "";
    });
    dataList.value = list;
    total.value = res.total;
  });
};

// 获取分类列表
const getMarketList = () => {
  marketType().then((res: any) => {
    generalList.value = res.data[0].value;
    industryList.value = res.data[1].value;
    // 添加全部选项
    generalList.value.unshift({ name: "全部", id: "" });
    industryList.value.unshift({ name: "全部", id: "" });
  });
};

// 切换通用分类
const handleGeneral = (val: any) => {
  queryParams.value.cloudMarketGeneralClassification = val;
  queryParams.value.params.pageNum = 1;
  getList();
};

// 切换行业分类
const handleIndustry = (val: any) => {
  queryParams.value.cloudMarketIndustryClassification = val;
  queryParams.value.params.pageNum = 1;
  getList();
};

// 排序
const handleSort = (val: any) => {
  if (val == queryParams.value.params.sortField) {
    queryParams.value.params.sort =
      queryParams.value.params.sort == "desc" ? "asc" : "desc";
  } else {
    queryParams.value.params.sort = "desc";
    queryParams.value.params.sortField = val;
  }
  queryParams.value.params.pageNum = 1;
  getList();
};

// 跳转详情页面
const handleView = (item: any) => {
  router.push({
    path: "/client/cloudMarketplace/components/shopping",
    query: {
      marketId: item.marketId,
    },
  });
};
</script>
<style lang="less" scoped>
.search {
  margin: 20px 0;

  :deep(.el-button) {
    background: #4098ff;
    width: 60px;
    color: #fff;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #4098ff;
    &:hover {
      color: #fff;
      border: 1px solid #4098ff;
      background: #4086d6;
    }
  }
}
.list {
  .query {
    padding: 20px;
    background-color: #fff;
    margin-bottom: 20px;
    box-shadow: -5px 5px 20px 0 #e3e8f0;
    .top {
      padding-bottom: 10px;
      border-bottom: 1px solid #e3e8f0;
      &:last-child {
        padding-bottom: 0;
        border-bottom: none;
      }
    }
    .item-title {
      color: #909090 !important;
    }
    .active::after {
      content: "";
      display: block;
      height: 1px;
      width: 100%;
      background-color: #409eff;
    }
  }
  .top {
    display: flex;
    justify-content: space-between;
    color: #909090;

    .left {
      display: flex;
      flex-flow: wrap;
      justify-content: flex-start;
      .item-title {
        color: #000;
        margin-right: 10px;
        height: 40px;
        line-height: 40px;
      }
      .item {
        padding: 0 10px;
        min-width: 75px;
        margin-right: 10px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        &:hover {
          cursor: pointer;
          // color: #63abfd;
        }
      }
    }
    .right {
      line-height: 40px;
    }
  }
  .active {
    color: #409eff;
  }

  .info {
    border-top: 1px solid #d9d9d9;
    .listItem {
      display: flex;
      transition: all 0.5s;
      padding: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid #d9d9d9;
      &:hover {
        cursor: pointer;
        background: #fff;
        box-shadow: -5px 5px 20px 0px #e3e8f0;
        .item2 .top1 {
          color: #3369ff;
        }
      }
      .item1 {
        width: 90px;
      }

      .item2 {
        flex: 1;
        flex-direction: column;
        padding: 0 20px;

        .top1 {
          color: #212a40;
          font-size: 18px;
          font-weight: 600;
          line-height: normal;
        }

        .top2 {
          color: #6d7383;
          font-size: 14px;
          line-height: 24px;
          margin: 10px 0;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }

        .top3 {
          font-size: 12px;
          color: #a3a9b7;
          line-height: 18px;
          > div {
            display: inline-block;
            max-width: 300px;
            margin-right: 50px;
          }
        }
      }

      .item3 {
        width: 200px;
        color: #fd6845;
        font-weight: bolder;
        font-size: 14px;
        line-height: 36px;
        display: flex;
        align-items: center;
        span {
          font-size: 28px;
        }
      }
    }
  }
}
.page-footer {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
:deep(.el-input__wrapper) {
  border-radius: 0;
}
:deep(.el-input-group__append) {
  border-radius: 0;
}
</style>
